<!--全局下拉选组件-->
<template>
  <div style="display:inline">
    <el-select
        @clear="() => { this.value=null } "
        :placeholder="placeholder"
        clearable
        filterable
        size="small"
        v-model="selectedOptions"
        v-if="showList"
        class="my-el-select">
      <el-option
          v-for="item in showList"
          :key="item[idNum]"
          :value="item[valueName]"
          :label="item[labelName]"/>
    </el-select>
  </div>
</template>
<script>
export default {
  name: "MySelect",
  props: {
    value: {},
    placeholder: {
      type: String
    },
    showList: {
      type: Array
    },
    idNum: {
      default: 'id'
    },
    valueName: {
      type: String,
      default: 'label'
    },
    labelName: {
      type: String,
      default: 'value'
    }
  },
  data() {
    return {
      //data重新定义变量接受组件v-model（value：名称必须为value）值，不改变props接收的值
      selectedOptions: this.value
    }
  },
//监听值的变化
  watch: {
    value(newVal) {
      this.selectedOptions = newVal
    },
//若选择器的值发生改变，则传参给父组件
//this.$emit(‘input’,val)，在父组件直接用v-model绑定，则可以直接获取到
    selectedOptions(newVal, oldVal) {
      this.$emit("input", this.selectedOptions)
    },
  }
}
</script>


<style scoped>
.my-select .el-select-dropdown {
  max-width: 100% !important;
}
</style>
